<template>
  <div class='container'>
          <el-form  style="text-align:left"
        ref="checkRef"
        :model="chkForm"
        :rules="chkRules"
      >
        <el-form-item  prop="chkState">
        <el-radio-group v-model="chkForm.chkState">
          <el-radio  :label="1" :checked="chkForm.chkState==1">通过</el-radio>
          <el-radio :label="2" :checked="chkForm.chkState==2">拒绝</el-radio>
       </el-radio-group>
        </el-form-item>
        <el-form-item prop="chkRemarks">
           <el-input type="textarea" :rows="2" placeholder="请输入审核意见" v-model="chkForm.chkRemarks"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align:right">
        <el-button @click="hCancel">取 消</el-button>
        <el-button type="primary" @click="hSubmit"
          >确 定</el-button
        >
      </div>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      chkRules: {
        chkRemarks: [{ required: true, message: '请输入审核意见', trigger: 'blur' }]
      },
      chkForm: {
        // id: 0,
        // chkState: 2,
        // chkRemarks: ''
      }
    }
  },
  // 侦听父传子过来的 row 赋值给 chkForm
  watch: {
    row: {
      handler () {
        if (this.row) {
          // 解决边输入，边改动数据的问题
          this.chkForm = JSON.parse(JSON.stringify(this.row))
          // this.chkForm = this.row
        }
      },
      immediate: true// 一打开页面就侦听
    }

  },
  methods: {
    // ◆用户点击了确认修改
    hSubmit () {
      this.$emit('success', this.chkForm)
    },
    // ◆用户点击了取消审核(子传父 cancel事件)
    hCancel () {
      this.$emit('cancel')
      this.resetChkForm()
    },
    // ◆定义重置按钮，等父组件来触发
    resetChkForm () {
      this.$refs.checkRef.resetFields()
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
